<!DOCTYPE html>
<html ng-app data-cast-api-enabled="true">
<head>
<title>Cast Web/Chrome Sender API Demo</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="http://www.gstatic.com/cv/versions/dev/temp-api-v2-D3vX/api_script.js"></script>
<script src="helloWorld.js"></script>
</head>
<body>
  <div>
    <div>
      <h2 style="display:block">Google Cast SDK Beta Release: Web Sample </h2>
      <div style="float:left; width:100%; margin:10px;">
        <h3 style="display: inline-block">Choose a media to cast</h3>
      </div>
      <br>
      <div style="width:80%; margin:10px;">
        <div style="margin:0px; float:left; width: 40%;">
           <input type="radio" checked name="media" onclick="selectMedia(0);">Big Buck Bunny MP4<br>
           <input type="radio" name="media" onclick="selectMedia(1);">Elephants Dream MP4<br>
           <input type="radio" name="media" onclick="selectMedia(2);">Tears of Steel MOV<br>
           <input type="radio" name="media" onclick="selectMedia(3);">Reel MP4<br>
           <input type="radio" name="media" onclick="selectMedia(4);">Google I/O 2011 MP3<br>
        </div>
        <div style="margin:0px; float:left; width:250px;">
           <img src="images/bunny.jpg" width="250" id="thumb">
           <img src="images/cast_icon_idle.png" id="casticon" width="30">
        </div>
        <div style="margin-top:60px; float:left; width:20%;">
	   <input class="vertical" type="range" min="0" max="100" step="1" onmouseup="setMediaVolume(100-this.value,false);">
           <div class="vertical">Volume control</div>
        </div>
      </div>

      <div id="media_control" style=" margin:10px; float:left; display:block; width:90%;">
        <button onclick="launchApp()">Launch app</button>
        <button onclick="stopApp()">Stop app</button>
        <br>
        <button onclick="loadMedia()">Load media</button>
        <button id="playpauseresume" onclick="playMedia()">Play</button>
        <button onclick="stopMedia()">Stop media</button>
	<span id="muteText">Mute media</span>
	<input type="checkbox" onclick="muteMedia(this);"> 
      <div>

      <div style="margin:10px;">
        Progress : <input id="progress" type="range" min="1" max="100" value="1" step="1" onmouseup="seekMedia(this.value);">
      </div>
      <div style="margin:10px;">
        State : <span id="playerstate">IDLE</span>
      </div>

      <div style="margin:10px;">
        <textarea rows="20" cols="70" id="debugmessage">
        </textarea>
      </div>


    </div>
  </div>

</body>
</html>
